<template>
	<view class="content" v-if="pageShow">
		<view class="headimg" @click="uploadImg(1,avatar,avatar_arr)">
			<image :src="avatar_arr[0]" mode=""></image>
			<view class="camera"></view>
		</view>
		<view class="color_ling text_d text margin_top">會員編號：{{number}}</view>
		<view class="mainpadding ffffff line_b9 flexbetween margin_top">
			<view class="text_weight color_san white_nowrap">昵稱 <text style="color: #ff0000;">*</text></view>
			<input class="textright color_ling text_d margin_right1" type="text" placeholder="請輸入昵稱" v-model="nickname">
		</view>
		<view class="mainpadding ffffff line_b9 flexbetween">
			<view class="text_weight color_san white_nowrap">姓名<text style="color: #ff0000;">*</text></view>
			<input class="textright color_ling text_d margin_right1" type="text" placeholder="請輸入姓名" v-model="username">
		</view>
		<view class="mainpadding ffffff line_b9 flexbetween">
			<view class="titletext bold hei_text">性别</view>
			<u-radio-group v-model="gender" placement="row" circle>
				<u-radio activeColor="#feb800" :customStyle="{marginRight: '30rpx'}" label="男" :name="0"></u-radio>
				<u-radio activeColor="#feb800" label="女" :name="1"></u-radio>
			</u-radio-group>
		</view>
		<view class="mainpadding ffffff line_b9 flexbetween">
			<view class="text_weight color_san white_nowrap">行動電話<text style="color: #ff0000;">*</text></view>
			<input class="textright color_ling text_d margin_right1" type="text" disabled="" placeholder="請輸入行動電話"
				v-model="mobile">
		</view>
		<view class="mainpadding ffffff line_b9 flexbetween">
			<view class="text_weight color_san white_nowrap">信箱<text style="color: #ff0000;">*</text></view>
			<input class="textright color_ling text_d margin_right1" style="width: 80%;" type="text" placeholder="請輸入信箱"
				v-model="email">
		</view>
		<view class="mainpadding ffffff line_b9 flexbetween">
			<view class="text_weight color_san white_nowrap">生日</view>
			<view class="flexleft" @click="shows=true">
				<input class="textright color_san text_d margin_right1" type="text" placeholder="請選擇日期" disabled
					v-model="birthday">
				<u-icon name="arrow-right" color="rgba(175, 175, 175, 1)" size="12"></u-icon>
			</view>
		</view>
		<uni-data-picker @change="bindPickerChange" :localdata="items" placeholder="請選擇住址" popup-title="請選擇地區"
			v-model="area">
			<view class="mainpadding ffffff border flexbetween ">
				<view class="text_weight color_san white_nowrap">地址</view>
				<view class="flexleft">

					<input class="textright color_ling text_d margin_right1" type="text" placeholder="請選擇地址" disabled
						v-if="!area.length" v-model="addre">
					<text class="inputs1" v-else>{{ area[0] }}/{{ area[1] }}/{{ area[2] }}</text>
					<view class="right_icon margin_left1"></view>
				</view>
			</view>
		</uni-data-picker>
		<view class="mainpadding ffffff line_b9">
			<view class="text_weight color_san white_nowrap">發票類型<text style="color: #ff0000;">*</text></view>
			<view class="margin_top flexbetween">
				<view :class="opentype==0?'flexleft select':'flexleft noSelect'" @click="opentype=0">
					<image class="vote1Img"
						:src="opentype==0?'/static/images/mine/vote1_active.png':'/static/images/mine/vote1.png'"
						mode=""></image>
					<view>紙本</view>
				</view>
				<view :class="opentype==1?'flexleft select':'flexleft noSelect'" @click="opentype=1">
					<image class="vote2Img"
						:src="opentype==1?'/static/images/mine/vote2_active.png':'/static/images/mine/vote2.png'"
						mode=""></image>
					<view>載具</view>
				</view>
				<view :class="opentype==2?'flexleft select':'flexleft noSelect'" @click="opentype=2">
					<image class="vote3Img"
						:src="opentype==2?'/static/images/mine/vote3_active.png':'/static/images/mine/vote3.png'"
						mode=""></image>
					<view>統編</view>
				</view>
				<view :class="opentype==3?'flexleft select':'flexleft noSelect'" @click="opentype=3">
					<image class="vote4Img"
						:src="opentype==3?'/static/images/mine/vote4_active.png':'/static/images/mine/vote4.png'"
						mode=""></image>
					<view>捐贈</view>
				</view>
			</view>
			<view class="invoiceInput margin_top flexbetween" v-show="opentype!=0">
				<input class="text_b" type="text" placeholder="請輸入手機載具" v-show="opentype==1" v-model="zjcode">
				<input class="text_b" type="text" placeholder="請輸入統一編碼" @blur="getTt()" v-show="opentype==2"
					v-model="tbcode">
				<input class="text_b" type="text" placeholder="請輸入捐贈碼" v-show="opentype==3" v-model="jzcode">
				<view class="" v-show="opentype==1 || opentype==3" @click="getCode()">
					<u-icon name="scan" color="#ffb800" size="28"></u-icon>
				</view>
			</view>
			<view class="invoiceInput margin_top" v-show="opentype==2">
				<input class="text_b" type="text" placeholder="請輸入發票抬頭" v-model="tbmc">
			</view>
		</view>
		
		<!-- <view class="mainpadding ffffff line_b9 flexbetween">
			<view class="text_weight color_san white_nowrap">LineID</view>
			<input class="textright color_ling text_d margin_right1" type="text" placeholder="請輸入LineID"
				v-model="lineid">
		</view>
		<view class="mainpadding ffffff line_b9 flexbetween">
			<view class="text_weight color_san white_nowrap">室内電話</view>
			<input class="textright color_ling text_d margin_right1" type="text" placeholder="請輸入室内電話" v-model="locall">
		</view>
		<view class="mainpadding ffffff line_b9 flexbetween">
			<view class="text_weight color_san white_nowrap">傳真</view>
			<input class="textright color_ling text_d margin_right1" type="text" placeholder="請輸入傳真" v-model="fax">
		</view>
	
		<view class="mainpadding ffffff line_b9 flexbetween margin_bottom3">
			<view class="text_weight color_san white_nowrap">詳細地址</view>
			<input class="textright color_ling text_d margin_right1" type="text" placeholder="請輸入詳細地址" v-model="address">
		</view>
		
		
		<view class="mainpadding ffffff line_b9 flexbetween">
			<view class="text_weight color_san white_nowrap">國籍<text style="color: #ff0000;">*</text></view>
			<input class="textright color_ling text_d margin_right1" type="text" placeholder="請輸入國籍"
				v-model="nationality">
		</view> -->
		<view class="footer">
			<view class="footerButton" @click="submit">
				保存
			</view>
		</view>
		<u-datetime-picker cancelText="取消" confirmText="確認" :show="shows" title="選擇生日" v-model="value1" mode="date"
			:minDate="Number(new Date('1924-01-01'))" confirmColor="#FFB800" @confirm="rzTimeconfirm"
			@cancel="shows=false"></u-datetime-picker>
	</view>
</template>

<script>
	import citys from "../static/city/city.js"
	export default {
		data() {
			return {
				number: "", //會員編號
				avatar: [], //頭像傳给後端的
				avatar_arr: [], //頭像
				nickname: "", //昵稱
				username: "", //姓名
				mobile: "", //行動電話
				email: "", //信箱
				opentype: 0, //開票類型 0紙本 1載具 2統編 3捐贈
				jzcode: "", //開票内容
				tbcode: "", //開票内容
				zjcode: "", //開票内容
				tbmc: "",
				lineid: "", //LineID
				locall: "", //室内電話
				fax: "", //傳真
				addre: "", //地址
				gender: "", //性别
				birthday: "", //生日
				nationality: "", //國籍
				shows: false,
				value1: Number(new Date()),
				items: citys.data, //省市區
				area: [], //選擇的省市區
				address: "",
				pageShow: false,
				lasttype: 0, //1註冊走進來的
			}
		},
		onLoad(options) {
			if (options.type) { //註冊走進來的
				this.lasttype = options.type
			}
			uni.$on("returnCode", data => {
				if (this.opentype == 1) {
					this.zjcode = data
				}
				if (this.opentype == 3) {
					this.jzcode = data
				}
			})
			this.getInfo()
			// upFile.getsystem();
		},
		onUnload() {
			uni.$off("returnCode")
		},
		methods: {
			getCode() {
				uni.navigateTo({
					url: "/pages_mine/getcodetwm"
				})
			},
			getTt() {
				this.http.request("/api/user/getTbmc", "GET", {
					tbcode: this.tbcode
				}).then(res => {
					if (res.code == 1) {
						this.tbmc = res.data.tbinfo.name
					} else {
						this.tbmc = ""
					}
				})
			},
			uploadImg(value, upImgs, upImgs_text) { //上傳圖片
				let _this = this;
				// let num = Number(value) - upImgs.length;
				// if (num <= 0) {
				// 	return false;
				// }
				uni.showActionSheet({
					itemList: ['照機', '相簿'],
					success: function(res) {
						// 選擇照機走0
						if (res.tapIndex == 0) {
							_this.http.chooseImage(1, ['camera']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], upImgs, upImgs_text)
								}
							}).catch(err => {});
						}
						// 選擇相簿走1
						if (res.tapIndex == 1) {
							_this.http.chooseImage(1, ['album']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], upImgs, upImgs_text)
								}
							}).catch(err => {});
						}
					},
					fail: function(res) {}
				});
			},
			uploadImageService(url, upImg, upImgs_text) {
				let _this = this;
				this.http.uploadFile('/api/common/upload', url).then(res => {
					let image_item = res.fullurl;
					this.avatar = [res.url]
					this.avatar_arr = [image_item]
					// upImg.push(res.url)
					// upImgs_text.push(image_item);
				}).catch(err => {});
			},
			async getInfo() {
				let res = await this.http.request('/api/member/userInfo', 'GET', {})
				this.number = res.data.bio
				uni.setStorageSync("invite_code", res.data.invite_code)
				if (res.data.avatar) {
					this.avatar_arr.push(this.imgUrl + res.data.avatar)
					this.avatar.push(res.data.avatar)
				}
				this.nickname = res.data.nickname
				this.username = res.data.username
				this.mobile = res.data.mobile
				this.email = res.data.email
				if (res.data.opentype != 0) {
					this.opentype = res.data.opentype
				}
				this.zjcode = res.data.zjcode
				this.tbcode = res.data.tbcode
				this.tbmc = res.data.tbmc
				this.jzcode = res.data.jzcode
				this.lineid = res.data.lineid
				this.locall = res.data.locall
				this.fax = res.data.fax
				this.address = res.data.address
				this.addre = res.data.addre
				this.gender = res.data.gender
				this.birthday = res.data.birthday
				this.nationality = res.data.nationality
				this.pageShow = true
			},
			rzTimeconfirm(e) {
				this.birthday = this.secondDate(e.value, 1, 1)
				console.log(this.birthday);
				this.shows = false;
			},
			bindPickerChange(val) {
				let area = val.detail.value
				console.log(area)
				this.area = [area[0].text, area[1].text, area[2].text];
				this.addre = `${this.area[0]}/${this.area[1]}/${this.area[2]}`
				// this.address.province = area[0].value;
				// this.address.city = area[1].value;
				// this.address.county = area[2].value;
			},
			validateChineseInput(input) {
				// 正则表达式解释：
				// ^ 表示字符串开始
				// [\u4e00-\u9fa5] 匹配任意中文字符
				// {2,} 表示至少出现2次
				// $ 表示字符串结束
				const chineseRegex = /^[\u4e00-\u9fa5]{2,}$/;
				return chineseRegex.test(input);
			},
			async submit() { //保存
				let _this = this
				if (!this.nickname) {
					this.http.toast("請輸入昵稱！")
					return false
				}
				if (!this.username) {
					this.http.toast("請輸入姓名！")
					return false
				}
				if (!this.validateChineseInput(this.username)) {
					this.http.toast("請輸入正確的姓名")
					return false
				}
				if (!this.mobile) {
					this.http.toast("請輸入行動電話！")
					return false
				}
				if (!this.email) {
					this.http.toast("請輸入信箱！")
					return false
				}
				if (this.opentype == 1 && this.zjcode == "") {
					this.http.toast("請輸入手機載具！")
					return false
				}
				if (this.opentype == 2 && this.tbcode == "") {
					this.http.toast("請輸入統一編碼！")
					return false
				}
				if (this.opentype == 2 && this.tbcode.length != 8) {
					this.http.toast("請輸入正確統編")
					return false
				}
				// if (this.opentype ==2 && this.tbmc=="" ) {
				// 	this.http.toast("請輸入發票抬頭！")
				// 	return false
				// }
				if (this.opentype == 3 && this.jzcode == "") {
					this.http.toast("請輸入捐贈碼！")
					return false
				}
				// if (!this.lineid) {
				// 	this.http.toast("請輸入LineID！")
				// 	return false
				// }
				// if (!this.locall) {
				// 	this.http.toast("請輸入室内電話！")
				// 	return false
				// }
				// if (!this.fax) {
				// 	this.http.toast("請輸入傳真！")
				// 	return false
				// }
				// if (!this.addre) {
				// 	this.http.toast("請選擇地址！")
				// 	return false
				// }
				// if(this.address==""){
				// 	this.http.toast("請輸入詳細地址！")
				// 	return false
				// }
				// if(!this.addre){
				// 	this.http.toast("請選擇性别！")
				// 	return false
				// }
				// if (!this.birthday) {
				// 	this.http.toast("請選擇生日！")
				// 	return false
				// }
				// if (!this.nationality) {
				// 	this.http.toast("請輸入國籍！")
				// 	return false
				// }
				let data = {
					avatar: _this.avatar.join(),
					nickname: _this.nickname, //昵稱
					username: _this.username, //姓名
					mobile: _this.mobile, //行動電話
					email: _this.email, //信箱
					opentype: _this.opentype, //開票類型 0紙本 1載具 2統編 3捐贈
					lineid: _this.lineid, //LineID
					locall: _this.locall, //室内電話
					fax: _this.fax, //傳真
					address: _this.address, //詳細地址
					addre: _this.addre, //地址
					gender: _this.gender, //性别
					birthday: _this.birthday, //生日
					nationality: _this.nationality, //國籍

				}
				if (this.opentype == 1) {
					this.$set(data, "zjcode", this.zjcode)
					this.$set(data, "tbmc", this.tbmc)
				}
				if (this.opentype == 2) {
					this.$set(data, "tbcode", this.tbcode)
					this.$set(data, "tbmc", this.tbmc)
				}
				if (this.opentype == 3) {
					this.$set(data, "jzcode", this.jzcode)
					this.$set(data, "tbmc", this.tbmc)
				}
				let res = await this.http.request('/api/member/userEdit', 'GET', data)
				if (res.code == 1) {
					this.http.toast("修改成功");
					if (this.lasttype == 1) {
						setTimeout(() => {
							uni.reLaunch({
								url: "/pages/index/index"
							})
						}, 500)
						return false
					}
					setTimeout(() => {
						uni.navigateBack(1)
					}, 500)
				} else if (res.code == 0) {
					this.http.toast(res.msg);
				} else {
					this.http.toast('系統處理中，請稍後再試');
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding-bottom: 150rpx;
	}

	.slot-content {
		width: 100%;

		.title {
			font-size: 40rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
			color: #000000;
			text-align: center;
		}

		.input {
			width: 100%;
			margin-top: 50rpx;
			text-align: center;
			padding: 30rpx 0;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #000000;
		}

		.button {
			width: 420rpx;
			height: 81rpx;
			line-height: 81rpx;
			text-align: center;
			border-radius: 51rpx;
			background-color: rgba(243, 39, 28, 1);
			margin: 60rpx auto 0;
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
	}

	.item_image_box {
		width: 33.33%;
	}

	.item_image {
		position: relative;
		width: 180rpx;
		height: 180rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.headimg {
		width: 150rpx;
		height: 180rpx;
		margin: 0 auto;
		padding-top: 40rpx;
		position: relative;

		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}

		.camera {
			width: 52rpx;
			height: 52rpx;
			position: absolute;
			bottom: 0;
			right: 0;
			background-size: 100% 100%;
			background-image: url('/static/images/mine/camera.png');
		}
	}

	.noSelect {
		width: 154rpx;
		height: 69rpx;
		text-align: center;
		line-height: 69rpx;
		background: rgba(102, 102, 102, .1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid rgba(102, 102, 102, .1);
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.select {
		width: 154rpx;
		height: 69rpx;
		text-align: center;
		line-height: 69rpx;
		background: rgba(255, 133, 5, 0.1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid #FF8505;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF8505;
		position: relative;
	}

	.select::after {
		content: '';
		width: 25rpx;
		height: 20rpx;
		position: absolute;
		right: 0;
		bottom: 0;
		background-image: url('/static/images/mine/invoice_select.png');
		background-size: 100% 100%;
	}

	.vote1Img {
		width: 26rpx;
		height: 26rpx;
		margin-left: 20rpx;
		margin-right: 10rpx;
	}

	.vote2Img {
		width: 23.5rpx;
		height: 23.5rpx;
		margin-left: 20rpx;
		margin-right: 10rpx;
	}

	.vote3Img {
		width: 29rpx;
		height: 29rpx;
		margin-left: 20rpx;
		margin-right: 10rpx;
	}

	.vote4Img {
		width: 27rpx;
		height: 27rpx;
		margin-left: 20rpx;
		margin-right: 10rpx;
	}

	.invoiceInput {
		width: 100%;
		height: 91rpx;
		background: rgba(196, 196, 196, .1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		display: flex;
		align-items: center;
		padding-left: 20rpx;

		input {
			width: 80%;
		}
	}
	::v-deep.u-radio-group {
		flex: none !important;
	}
</style>